<template>
    <!-- 只能有一个根节点 -->
    <!-- vue3里面可以有多个根节点:会在组件渲染时候最外层拼接一个fragment元素包裹 -->
    <div class="MyInfo">
        This is an about page
        <span class="myspan">test class</span>
        <input type="text" v-model="num" />
        <children :numpro="num"></children>
    </div>
</template>

<script>
import children from "./children.vue";
export default {
    components: {
        children
    },
    props: {},
    data() {
        return {
            num: 1
        };
    },
    computed: {},
    methods: {},
    beforeCreate() {
        console.log("进入beforeCreate页面");
    },
    created() {
        // 用来请求数据的
        console.log("进入about created页面");
    },
    beforeMount() {
        console.log("进入about beforeMount");
    },
    mounted() {
        // 操作一些dom元素.或者是初始化一些插件. 这里是dom挂载之后
        console.log("进入about mounted");
    },
    beforeUpdate() {
        console.log("进入about beforeUpdate");
    },
    updated() {
        console.log("进入about updated");
    },
    beforeDestroy() {
        console.log("进入about beforeDestroy");
    },
    destroyed() {
        // 清除一些定时器.或者事件监听.
        console.log("进入about destroyed");
    },
    activated() {
        // keepalive 缓存组件时候.激活状态
    },
    deactivated() {
        // keepalive 缓存组件时候.失去激活状态
    }
};
</script>
<style scoped>
/* postcss */
/* 局部样式    写的样式只能在当前组件中起作用 */
/* scoped是什么原理. 为什么这样就可以是局部样式 */
/* scoped 属性会给当前组件的每一元素.添加一个自定义属性(的hash值) 然后利用属性选择器*/
.MyInfo {
    color: red;
    width: 3.75rem;
}
.myspan {
    color: aqua;
}
</style>
